<!-- **
    * @description DatePicker 日期组件
** -->
<!-- **
    * @use 无需引入直接使用 <yfn-date-picker v-model="value" @change="dateChange" />
    * @params参数说明：
    * @params {v-model}                绑定值
    * @params {el}                     日期元素，默认 a-range-picker，可选值 a-date-picker、a-month-picker、a-year-picker等(和 DatePicker 内的一致)
    * @params {el-type}                同 el, [注：组件被引用时避免和其他组件内 el 定义产生冲突]
    * @params {allow-clear}            是否允许清除，默认 true
    * @params {readonly}               是否为只读，默认 false
    * @params {size}                   日期选择器的尺寸，默认 medium，可选值 mini / small / medium / large
    * @params {placeholder}            提示文案
    * @params {has-shortcuts}          是否显示 预设时间范围快捷选择，设置此值后不用设置 shortcuts，默认 false
    * @params {shortcuts}              预设时间范围快捷选择
    * @params {shortcuts-position}     预设范围在面板上的位置
    * @params {...}                    继承 el 原生属性/事件
** -->
<!-- **
    * @events事件：
    * @change                          值改变时触发
    * @get-instance                    获取实例
    * @{...}                           继承 el 原生事件
** -->
<!-- **
    * @slots插槽：
    * @prefix                          输入框前缀
    * @suffix-icon                     输入框后缀图标
    * @{...}                           继承 el 原生插槽
** -->
<template>
  <compo-com class="YfnDatePicker" ref="YfnDatePicker" v-if="biz.visible" />
</template>
<script lang="ts" setup>
  import { reactive, defineProps, useAttrs, useSlots, h, defineAsyncComponent, getCurrentInstance } from 'vue'
  import { rangeShortcuts } from '@/utils/timeFormat'

  /* props */
  const props = defineProps({
    el: String,
    elType: String,
  })
  /* proxy */
  const { proxy } = getCurrentInstance() as any
  /* emit */
  const emit = defineEmits(['get-instance'])
  /* attrs */
  const attrs = useAttrs()
  /* slots */
  const slots = useSlots()
  /* data */
  const options = reactive({
    ...props,
    ...attrs,
  })
  const biz = reactive({
    module: {},
    visible: false,
  })
  /* fn */
  const getFile = () => {
    import(`@arco-design/web-vue/es`).then((res) => {
      biz.module = res
      biz.visible = true
      setInstance()
    })
  }
  const getKey = (key: any) => {
    const keyAttr = key.split('a-')[1]
    const keyArr = keyAttr.split('-')
    let keyR = ''
    keyArr.forEach((p: any) => {
      const str = `${p.charAt(0).toUpperCase()}${p.slice(1)}`
      keyR += str
    })
    return keyR
  }
  getFile()
  // 实例
  const setInstance = () => {
    emit('get-instance', proxy)
  }
  /* render */
  const CompoCom = defineAsyncComponent(() => {
    return new Promise((resolve) => {
      const createEl: any = renderFn()
      resolve(createEl)
    })
  })
  const renderFn = () => {
    return {
      props: {},
      render(): any {
        const createNode = () => {
          // 元素
          const elKey = getKey(options.elType || options.el || 'a-range-picker')
          const el = biz.module[elKey]
          // 属性
          let defaultProps = {}
          if (options['has-shortcuts']) {
            defaultProps['shortcuts'] = rangeShortcuts()
            options['shortcuts-position'] ?? (defaultProps['shortcuts-position'] = 'left')
          }
          const props = {
            ...defaultProps,
            ...options,
          }
          return h(el, props, slots)
        }
        return createNode()
      },
    }
  }
</script>
<style scoped lang="less"></style>
